<template>
  <el-card class="munu">
    <div class="munu_box">
      <el-card
        class="carton_card carton_top"
        style="width:50%"
      >
        <el-row style="margin-bottom: 10px;">
          <el-col
            :span="8"
            style="text-align:left;"
          >
            <div>
              <span>{{ `纸箱全流程` }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/salesManage/cartonOrder')"
            >纸箱订单</el-button>
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/1.png"
              alt=""
            >
          </el-col>
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/purchase/purchasePaperboard/purchasePaperboardOrder')"
            >纸板采购</el-button>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="4">
            <el-button
              class="pause-button"
              @click="gotolink('/financial/payable/payableStatement')"
            >应付对账</el-button>
          </el-col>
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <img
              src=""
              alt=""
              style="width:0px;height:0px"
            >
          </el-col>
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/2.png"
              alt=""
            >
          </el-col>
          <el-col :span="4" />
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/produce/cartonScheduling')"
            >纸箱排程</el-button>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/purchase/purchasePaperboard/purchasePaperboardWarehouse')"
            >纸板入库</el-button>
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/3.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <el-button
              class="pause-button"
              @click="gotolink('/purchase/purchasePaperboard/boardReturnOrder')"
            >纸板退货</el-button>
          </el-col>
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/5.png"
              alt=""
            >
          </el-col>
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4" />
          <el-col :span="4" />
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/produce/cartonWarehouse')"
            >纸箱入库</el-button>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/inventory/paperboard/BoardPicking')"
            >纸板领料</el-button>
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/3.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <el-button
              class="pause-button"
              @click="gotolink('/inventory/paperboard/BoardReturnWareHouse')"
            >纸板退仓</el-button>
          </el-col>
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4" />
          <el-col :span="8" />
          <el-col :span="6" />
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/inventory/carton/cartonLoadingUp')"
            >纸箱装车</el-button>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/financial/receivable/receivableStatement')"
            >应收对账</el-button>
          </el-col>
          <el-col :span="4" />
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <img
              src="../../../../assets/imges/arrows/4.png"
              alt=""
            >
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/2.png"
              alt=""
            >
          </el-col>
          <el-col :span="5" />
          <el-col :span="6" />
        </el-row>
        <el-row class="carton_row">
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/inventory/carton/cartonDelivery')"
            >纸箱送货</el-button>
          </el-col>
          <el-col :span="4">
            <img
              src="../../../../assets/imges/arrows/3.png"
              alt=""
            >
          </el-col>
          <el-col :span="5">
            <el-button
              class="pause-button"
              @click="gotolink('/inventory/carton/cartonReturn')"
            >纸箱退货</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        style="width:30%;"
        class="back"
      >
        <el-row>
          <el-col :span="12">
            <div style="padding-right:24%;">
              <span>{{ `业务报表` }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row class="reportForm_card">
          <div class="reportForm_div">
            <div @click="gotolink('/report/SaleReport/SalePerformance')">业绩汇总表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/purchaseReport/BoardPurchaseSummary')">纸板采购汇总表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/productionReport/PaperBoardInventory')">成品库存明细表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/productionReport/PaperBoardProductionSum')">成品生产入库表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/inventoryReport/FreightDetail')">车辆运费明细表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/inventoryReport/PaperBoardDeliveryDetail')">送货明细表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/financeReport/CustomerAgeSum')">客户账龄汇总表</div>
          </div>
          <div class="reportForm_div">
            <div @click="gotolink('/report/financeReport/SupplierAgingSummary')">供应商账龄汇总表</div>
          </div>
        </el-row>
      </el-card>
      <el-card
        style="width:30%;"
        class="cardback"
      >
        <el-row style="margin-bottom:10px;height: 40%;">
          <el-col style="padding: 10px 15px;height: 100%;">
            <div style="padding-right:24%;">
              <span>{{ `小程序/App` }}</span>
            </div>
            <div style="display: flex;flex-direction: column;align-items: center;height: 100%;justify-content: center;">
              <div class="menu">
                <div class="QRCode">
                  <vue-qr
                    :logo-src="imageUrl"
                    :text="url"
                    :size="200"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom:10px;height: 60%;">
          <el-col style="padding: 10px 15px;height: 100%;">
            <div>
              <span>{{ `产品动态` }}</span>
              <span
                style="float: right;color:#1571FA;cursor: pointer;"
                @click="handermoves"
              > {{ `更多` }}</span>
            </div>
            <notification
              :lister="lister"
              @view-detail="handleViewNotification"
              @add-data="handermove"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <carton-productDynamic
      :id="id"
      :list="list"
      :visible.sync="productDynamic"
      @add-data="handleproductionSettings"
    />
  </el-card>
</template>

<script>
import vueQr from 'vue-qr'
import Notification from '../components/Notification.vue'
import CartonProductDynamic from '../components/CartonProductDynamic.vue'
import SystemConfigAPI from '@/api/system-config'

export default {
  name: 'Menu',
  components: {
    vueQr,
    Notification,
    CartonProductDynamic
  },
  data() {
    return {
      colorClass: [
        'icon-people',
        'icon-message',
        'icon-money',
        'icon-shopping'
      ],
      report: [
        {
          name: '业绩汇总表',
          url: '/report/SaleReport/SalePerformance'
        },
        {
          name: '纸板采购汇总表',
          url: '/report/purchaseReport/BoardPurchaseSummary'
        },
        {
          name: '成品库存明细表',
          url: '/report/productionReport/PaperBoardInventory'
        },
        {
          name: '成品生产入库表',
          url: '/report/productionReport/PaperBoardProductionSum'
        },
        {
          name: '车辆运费明细表',
          url: '/report/inventoryReport/FreightDetail'
        },
        {
          name: '送货明细表',
          url: '/report/inventoryReport/PaperBoardDeliveryDetail'
        },
        {
          name: '客户账龄汇总表',
          url: '/report/financeReport/CustomerAgeSum'
        },
        {
          name: '供应商账龄汇总表',
          url: '/report/financeReport/SupplierAgingSummary'
        }
      ],
      id: '',
      type: '01',
      list: [],
      lister: [],
      productDynamic: false,
      imageUrl: require('../../../../assets/imges/logo.png'),
      url: '爱纸箱'
    }
  },
  computed: {
    extend: function () {
      return this.$store.state.user.extend
    }
  },
  mounted() {
    this.getList()
    this.getQrCode()
  },
  methods: {
    async getList() {
      const params = {
        page: 1,
        pageSize: 10
      }
      await SystemConfigAPI.getList('notice', params).then(async res => {
        if (res.code === 200) {
          this.list = res.data.pageItems
          this.lister = this.list.slice(0, 6)
        }
      })
    },
    async getQrCode() {
      await SystemConfigAPI.getList('picture').then(res => {
        if (res.code === 0) {
          this.url = res.data.pageItems[0].name
        }
      })
    },
    goback() {
      this.versionIntroducedVisible = true
    },
    openNotifyDialog(list) {
      if (!this.$store.state.settings.firstLogin && this.$route.path === '/dashboard') {
        this.$store.dispatch('settings/setLoginStatus', true)
        this.id = list.noticeId
        this.productDynamic = true
      }
    },
    gotolink(url) {
      this.$router.replace(url)
    },
    handleViewNotification(id) {
      this.id = id
    },
    handermove() {
      this.productDynamic = true
    },
    handermoves() {
      this.id = this.list[0].noticeId
      this.productDynamic = true
    },
    handleproductionSettings() { }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/handle.scss';
/deep/ .el-col {
  text-align: left;
}
.munu {
  width: 100%;
  & /deep/ .el-card {
    @include font_color('card_head_fontcolor');
  }
  & /deep/ .el-card__header {
    padding: 5px 10px;
  }
  & /deep/ .el-card__body {
    padding: 10px 15px;
    // background-color: #f6f9fe;
  }
}
.carton_top {
  /deep/ .el-col {
    text-align: center;
  }
}
span {
  font-size: 15px;
  font-weight: 900;
}
.header_div {
  display: flex;
  justify-content: space-between;
}
.munu_box {
  display: flex;
}
.carton_card {
  background-color: #fff;
  /deep/ .el-button--mini {
    font-size: 14px;
    background-color: #e5ebf6;
  }
  /deep/ .el-button:hover,
  .el-button:focus {
    color: #606066;
  }
  .direction_box {
    width: 45px;
    height: 51px;
    display: flex;
    justify-content: flex-start;
    margin-right: 25px;
    padding: 35px 10px;
    .direction_content {
      width: 35px;
      height: 15px;
      background: #1890ff;
      position: absolute;
    }
    .direction_direction {
      position: relative;
      top: -7px;
      right: -35px;
      width: 0;
      height: 0;
      border: 14px solid transparent;
      border-left-color: #1890ff;
    }
  }
  .carton_row {
    margin-top: 10px;
    img {
      width: 30px;
      height: 30px;
    }
  }
}
.back {
  /deep/ .el-card__body {
    height: 100%;
  }
}
.cardback {
  /deep/ .el-card__body {
    padding: 0px;
    height: 100%;
  }
}
.reportForm_card {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  .el-card__body {
    height: 100%;
  }
  .reportForm_div {
    div {
      width: 200px;
      line-height: 35px;
      font-size: 15px;
      color: #000000;
      background: #e5ebf6;
      text-align: center;
      margin-bottom: 5px;
      border-radius: 5px;
      &:hover {
        background: #1571fa;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
.multiterminal {
  border: 1px solid #1571fa;
  width: 150px;
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .QRCode {
    display: flex;
    width: 115px;
    margin-top: -20px;
    img {
      width: 115px;
      height: 115px;
    }
  }
}
</style>
